<template>
  <n-spin :show="option.show">
  <n-form
      ref="formRef"
      :model="register"
  >
    <n-form-item :show-feedback="false" path="username">
      <n-input v-model:value="register.account" placeholder="输入用户名">
        <template #prefix>
          <i class="fa fa-user-o" />
        </template>
      </n-input>
    </n-form-item>
    <n-form-item :show-feedback="false" path="password">
      <n-input type="password" v-model:value="register.password" placeholder="输入密码" showPasswordOn="click">
        <template #prefix>
          <i class="fa fa-key" />
        </template>
      </n-input>
    </n-form-item>
    <n-form-item :show-feedback="false" path="cpassword">
      <n-input type="password" v-model:value="register.cpassword" placeholder="请确认密码" showPasswordOn="click">
        <template #prefix>
          <i class="fa fa-key" />
        </template>
      </n-input>
    </n-form-item>
    <n-form-item :show-feedback="false">
      <n-button attr-type="button" type="info" ghost block @click="registerClick">
        注册
      </n-button>
    </n-form-item>
    <n-form-item :show-feedback="false"  style="display: flex;justify-content: flex-end">
      <n-button type="info" text @click="$router.push('/login')">
        已有账号?
      </n-button>
    </n-form-item>
  </n-form>
  </n-spin>
</template>

<script>
export default {
  name: "RegisterUserTemplate",
  data(){
    return{
      register:{
        account:'',
        password:'',
        cpassword:''
      },
      option:{
        show:true
      }
    }
  },
  methods:{
    registerClick:function (){
      const register=this.register;
      if (register.password !== register.cpassword) {
        this.$utils.utilMessage('info','请确认密码是否一致')
        return;
      }
      this.axios.post("/user/register",this.register).then((res)=>{
        const data=res.data;
        let msg;
        if (data.error){
          msg=data.error;
        }else {
          msg=data.data;
        }
        if (this.$utils.tipsOption(data.code, data.status, msg)) {
          return;
        }
        this.$router.push("/login")
      });
    }
  },
  mounted() {
    setTimeout( ()=>{
      this.option.show=false;
      console.log(this.option.show)
    },500);
  }
}
</script>

<style scoped>

</style>